<template>
  <view class="container">
    <view class="settings-section">
      <view class="settings-item" @click="handleFontSize">
        <text class="settings-text">字体大小</text>
        <text class="settings-value">{{ fontSize }}px</text>
      </view>
      
      <view class="settings-item" @click="handleBackgroundColor">
        <text class="settings-text">背景颜色</text>
        <view class="color-preview" :style="{ backgroundColor: backgroundColor }"></view>
      </view>

      <view v-if="isLoggedIn" class="settings-item logout" @click="handleLogout">
        <text class="settings-text">退出登录</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';

const fontSize = ref(16);
const backgroundColor = ref('#ffffff');
const isLoggedIn = ref(false);

// 检查登录状态
const checkLoginStatus = () => {
  const token = uni.getStorageSync('token');
  isLoggedIn.value = !!token;
};

// 处理字体大小
const handleFontSize = () => {
  uni.showActionSheet({
    itemList: ['小', '中', '大'],
    success: (res) => {
      const sizes = [14, 16, 18];
      fontSize.value = sizes[res.tapIndex];
      saveSettings();
      // 通知其他页面更新设置
      uni.$emit('settingsChanged', {
        fontSize: fontSize.value,
        backgroundColor: backgroundColor.value
      });
    }
  });
};

// 处理背景颜色
const handleBackgroundColor = () => {
  uni.showActionSheet({
    itemList: ['白色', '浅灰', '浅蓝'],
    success: (res) => {
      const colors = ['#ffffff', '#f5f5f5', '#e6f3ff'];
      backgroundColor.value = colors[res.tapIndex];
      saveSettings();
      // 通知其他页面更新设置
      uni.$emit('settingsChanged', {
        fontSize: fontSize.value,
        backgroundColor: backgroundColor.value
      });
    }
  });
};

// 保存设置
const saveSettings = () => {
  const settings = {
    fontSize: fontSize.value,
    backgroundColor: backgroundColor.value
  };
  uni.setStorageSync('settings', settings);
};

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除登录信息
        uni.removeStorageSync('token');
        uni.removeStorageSync('userInfo');
        isLoggedIn.value = false;
        
        // 跳转到个人中心页并刷新
        uni.switchTab({
          url: '/pages/my/my'
        });
      }
    }
  });
};

onMounted(() => {
  checkLoginStatus();
  
  // 加载保存的设置
  const savedSettings = uni.getStorageSync('settings');
  if (savedSettings) {
    fontSize.value = savedSettings.fontSize;
    backgroundColor.value = savedSettings.backgroundColor;
  }
});
</script>

<style>
.container {
  min-height: 100vh;
  padding: 20px;
  background-color: #f5f5f5;
}

.settings-section {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-text {
  font-size: 16px;
  color: #333;
}

.settings-value {
  color: #666;
}

.color-preview {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.logout {
  margin-top: 20px;
  color: #ff3b30;
  justify-content: center;
}

.logout .settings-text {
  color: #ff3b30;
}
</style> 